<template>
    <div class="my-root">
        <loading v-if="showLoading"></loading>
        <div class="content">
           <home-item v-for="room in roomList" :r="room"></home-item>
           <p v-if="error">不好意思，加载失败，请稍后再试...</p>
           <div class="clear"></div>
           <load-more  v-if="!showLoading" @click="loadMore"></load-more>
           <back-top></back-top>
        </div>
        
    </div>
</template>

<script>
    import Public from '../public.js'
    
    export default{
        mixins:[Public],
        data(){
            return{
                showLoading:true,
                roomList:[],
                count:1,
                error:false,
            }
        },
        components:{
           
        },
        methods:{
            getRoomList(page){
                
            this.axios.get('/vueapi/v1/topics?page='+page)
                .then(data=>{
                    this.error=false 
                    var message=data.data.data
                    // console.log(message)
                    for(var i=0;i<20;i++){
                        if(message[i].tab=="ask"){
                            this.roomList=this.roomList.concat(message[i])
                        }
                    }
                    setTimeout(()=>{
                        this.showLoading=false
                    })

                })
                .catch(err=>{
                    this.error=true
                    setTimeout(()=>{
                        this.showLoading=false
                    },2000)
                })
            },
            loadMore(){
                this.count++
                this.getRoomList(this.count)
            }
        },
        created(){
            this.getRoomList(this.count)
        }
        
    }
</script>

<style>
    .content{
        padding-top: 64px;
        padding-bottom: 49px;
    }
    
</style>
